<link href="/css/discount/storelist.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="/css/jquery_ui/smoothness/jquery.ui.all.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery-ui.custom.min.js"></script>
<script type="text/javascript">
	var stores = "";
	var storeView;
	
	$(document).ready(function(){
		storeView = $("#hidden_storelist_item").html();
	});

	function showStores(i){
		if (i >= stores.length) return;
		$("#storelist").append("<li id='storelist_item" + i + "'>" + storeView + "</li>");
		$("#storelist #storelist_item" + i + " #store_name").html(stores[i][1]);
		$("#storelist #storelist_item" + i + " #store_enterlink").html("<a href='javascript:showStorePage(" + stores[i][0] + ")'/>");
		$("#storelist #storelist_item" + i + " #storelist_item").toggle("drop", 500);
		setTimeout("showStores(" + (i + 1) + ")", 100);
		$("#storelist #storelist_item" + i).hover(function(){
			$(this).find("#store_mask").fadeOut("fast");
			$(this).find("#store_enterlink").animate({width:20,left:0}, "fast");
		}, function(){
			$(this).find("#store_mask").fadeIn("fast");
			$(this).find("#store_enterlink").animate({width:0,left:0}, "fast");
		});
	}
	
	function hideStores(i){
		if (i < 0) return;
		$("#storelist #storelist_item" + i + " #storelist_item").toggle("drop", 500);
		setTimeout("hideStores(" + (i - 1) + ")", 100);
	}

	function showStoresByType(_type, _index){
		showLoading();
		$.getJSON("/discount/getStoresByType", {"storeType" : _type, "begin" : _index * 10, "end" : (_index + 1) * 10}, processStores);
		function processStores(_stores){
			stores = _stores;
			$("#storelist #storelist_item").stop();
			$("#storelist li").remove();
			hideLoading();
			showStores(0);
		}
	}
</script>
<ul id="storelist">	
</ul>
<div>
	<span id="toolbar" class="ui-widget-header ui-corner-all">
		<label id="" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left">
			<span class="ui-button-text"></span>
		</label>
		<button id="rewind">rewind</button>
		<button id="play">play</button>
		<button id="stop">stop</button>
		<button id="forward">fast forward</button>
		<button id="end">go to end</button>
		
		<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
	
		<span id="repeat">
			<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
			<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
			<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
		</span>
	</span>
</div>
<div id="hidden_storelist_item">
	<div id="storelist_item" style="display:none;">
		<div id="store_mask">
		</div>
		<div id="store_img">
			<img></img>
		</div>
		<div id="store_name">
		</div>
		<div id="store_enterlink">
			<a></a>
		</div>
		<div id="store_description">
		</div>
	</div>
</div> 
<div>
	
</div>
